<template>
    <div class="agreement-page">
        <el-form>
            <div class="detail-title">{{title.titleAll}}</div>
	    <div class="detail-agreement">
            <div class="agreement-title">{{title.titleOne}}</div>
            <div class="detail-list"><div class="list-left"><span>*</span>采购商：</div><div class="list-right">{{detail.purchaser}}</div></div>
            <div class="detail-list"><div class="list-left"><span>*</span>供应商：</div><div class="list-right">{{detail.supplier}}</div></div>
        </div>
        <div class="detail-agreement">
            <div class="agreement-title">{{title.titleTwo}}</div>
            <div class="detail-list"><div class="list-left"><span>*</span>中文：</div><div class="list-right">{{detail.contractTitleCn}}</div></div>
            <div class="detail-list"><div class="list-left"><span>*</span>英文：</div><div class="list-right">{{detail.contractTitleEn}}</div></div>
        </div>
        <div class="detail-agreement">
            <div class="agreement-title">{{title.titleThree}}</div>
            <div class="detail-list"><div class="list-left"><span>*</span>合同/协议号：</div><div class="list-right">{{detail.contractId}}</div></div>
            <div class="detail-list"><div class="list-left"><span>*</span>合同/协议内容：</div><div class="list-right">{{detail.content}}</div></div>
            <div class="detail-list"><div class="list-left"><span>*</span>执行日期：</div><div class="list-right">{{detail.executionDate}}</div></div>
            <div class="detail-list"><div class="list-left"><span>*</span>行业类别：</div><div :class="flag?'list-right-two':'list-right'">{{detail.industryType}}</div><div class="list-right-two" v-show="flag">{{detail.industryType}}</div></div>
            <div class="detail-list"><div class="list-left"><span>*</span>服务类型：</div><div class="list-right">{{`${detail.serviceType1}-${detail.serviceType2}-${detail.serviceType3}`}}</div></div>
        </div>
        <div class="detail-agreement">
            <div class="agreement-title">{{title.titleEnd}}</div>
            <div class="detail-list"><div class="list-left"><span>*</span>合同金额：</div><div class="list-min">{{detail.amount}}万元</div></div>
        </div>
        </el-form>
        
    </div>
</template>

<script>
export default {
    data(){
        return {
            flag:false,
            routerId:2,
            detail:{
                purchaser:'',
                supplier: '',
                contractTitleCn:'',
                contractTitleEn:'',
                contractId:'',
                content:'',
                executionDate:'',
                industryType:'',
                serviceType1:'',
                amount:''
            }
        }
    },
    created(){
            // this.routerId=this.$route.params.id
            this.$axios.get(`/api/contract/getContract?id=${this.routerId}`).then(res=>{
                this.$store.commit('changgeDetail',res.data.data)
            })
            
    },
    mounted(){
        this.detail=this.$store.state.detail
        this.detail.executionDate=this.formatDayTime(this.detail.executionDate)
        if(this.detail.industryType==='其他'){
            this.flag=true
        }
        this.flag=false
        console.log(this.detail);
    },
    methods:{
        formatDayTime:function(val){
                if(val) {
                    let date = new Date(val)
                    let Y = date.getFullYear();
                    let M = date.getMonth() + 1;
                    let D = date.getDate();
                    if(M < 10) {
                        M = '0' + M;
                    }
                    if(D < 10) {
                        D = '0' + D;
                    }
                    return Y + '-' + M + '-' + D ;
                } else {
                    return '';
                }
            },
    },
    props:['title'],
    components:{

    }
}
</script>

<style lang="scss">
     .agreement-page{
        //    width: 100%;
        //    padding: 15px;
        //    margin: 0 auto;
           display: flex;
           flex-flow: column;
           .detail-title{
                width:562px;
                height:52px;
                font-size:18px;
                font-family:PingFangSC-Medium,PingFang SC;
                font-weight:500;
                color:rgba(51,51,51,1);
                text-align: center;
                line-height:26px;
                padding:30px 0 18px 0;
                height: 96px;
                margin: 0 auto;
                width:100%;
               .title{
                    text-align: center;
                    font-size: 20px;
                    font-family: 中黑体;
                }
                .titlet{
                    text-align: center;
                    font-size: 18px;
                }
           }
           
        }
        .detail-agreement{
                padding: 10px 0 0 0;
                margin-top: 30px;
                border-top: 1px dotted #D9E1E9;
                .agreement-title{
                    padding-left: 6px;
                    border-left: 4px solid #FE8C01;
                }
           }
        .detail-list{
            display: flex;
            margin-top: 20px;
            .list-left{
                height:32px;
                width:20%;
                display: flex;
                justify-content: flex-end;
                line-height: 32px;
                span{
                    color: #FE8C01;
                }
            }
            .list-right{
                padding-left: 10px;
                width:50%;
                height:32px;
                line-height: 32px;
                background:rgba(255,255,255,1);
                border:1px solid #D9E1E9;
            }
             .list-right-two{
                padding-left: 10px;
                margin-right: 20px;
                width:23%;
                height:32px;
                line-height: 32px;
                background:rgba(255,255,255,1);
                border:1px solid #D9E1E9;
            }

            .list-min-center{
                padding-left: 10px;
                width:25%;
                height:32px;
                line-height: 32px;
                background:rgba(255,255,255,1);
                border:1px solid #D9E1E9;
            }
            .list-min{
                padding-left: 10px;
                width:13%;
                height:32px;
                line-height: 32px;
                background:rgba(255,255,255,1);
                border:1px solid #D9E1E9;
            }
        }
        .el-textarea__inner{
            min-height: 186px !important;
        }
        .textarea-size{
            width: 485px;
        }
        .agreement-title-list{
            display: flex;
            width: 100%;
            margin-top: 30px;
        }
        .ipt-user{
            width: 50%;
            height: 32px;
            border:1px solid #D9E1E9;
            padding-left: 10px;
            outline: none;
        }
    
</style>







